<template>
  <div style="padding: 10px">
    <d-table
      :data="tableData"
      :columns="columns"
      border
      :row-class-name="RowClassName"
      :showPagination="false"></d-table>
  </div>
</template>

<script lang="ts" setup>
  const RowClassName = data => {
    if (data.row.name === 'Tom1') {
      return 'odd-row'
    }
    return ''
  }
  const columns = [
    { label: '日期', prop: 'date', class: 'text-red-500' },
    { label: '姓名', prop: 'name', color: { Tom2: 'green' } },
    { label: '地址', prop: 'address' }
  ]
  const tableData = [
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
    { date: '2016-05-02', name: 'Tom1', address: 'No. 189, Grove St, Los Angeles' },
    {
      date: '2016-05-04',
      name: 'Tom2',
      address: 'No. 189, Grove St, Los Angeleshdsiahdiahdohdaodh dhsioahdoahdoahdsoihdadhao'
    }
  ]
</script>
<style scoped lang="scss">
  ::v-deep(.el-table) {
    .odd-row {
      background-color: #fce2cd;
    }
    .text-red-500 {
      color: rgb(214, 10, 10);
    }
  }
</style>
